<template>
<div class="frienddetaillayout">
  <!-- 列表栏 -->
            <div class="friendlist">
                <div class="friendsearch">
                    <div class="groupaddbutton">
                       <span>群聊列表</span>
                       <div class="button">
                            <el-button icon="el-icon-plus" circle @click="dialogVisible = true"></el-button> 
                       </div>
                      
                    </div>

                    <el-dialog
                        title="创建群聊"
                        :visible.sync="dialogVisible"
                        width="40%"
                        >
                        <div class="creategroupinputavatar">
                            <form>  
                                <span>头像上传：</span>
                                <input name="file" type="file" @change="uploadAvatar" />
                            </form>
                        </div>
                        <div class="creategroupinput">
                             <el-input v-model="createGroupinfo.name" placeholder="群名"></el-input>
                        </div>
                        <div class="creategroupinput">
                             <el-input v-model="createGroupinfo.lordname" placeholder="我的本群昵称"></el-input>
                        </div>
                       <div class="creategroupinput">
                           <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="群公告"
                            v-model="createGroupinfo.notice">
                            </el-input>
                       </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="success" @click="createGroup">创 建</el-button>
                        </span>
                    </el-dialog>
                    
                </div> 

                <div class="friendlists">
                    <ul class="friendlistsul">   
                        <li class="friendlistli" v-for="i of showList" :key="i.id">                    
                                <div class="friendavaname" @click="getGroupDetail(i.id)">
                                    <div class="friendavatar">
                                        <el-avatar :src="i.imgurl"></el-avatar>
                                        <div class="friendname">
                                            <span>{{i.name}}</span>
                                        </div> 
                                    </div>  
                                    <div class="friendtime">
                                        <span>{{dateformate(i.time)}}</span>
                                    </div>  
                                </div>                 
                        </li>
                    </ul>
                </div>
            </div>

     <div class="groupcontent">
      <div class="groupdetaillayout">
          <div class="groupdetail" v-if="this.detailData.id">
              <!-- 左侧群信息 -->
              <div class="groupmessage">
                  <div class="groupavatar">
                      <img :src="detailData.imgurl">
                  </div>
                  <div class="groupnametime">
                      <span>群ID：{{detailData.id}}</span>
                      <span>群名：{{detailData.name}}</span>
                      <span>群主：{{detailData.lordName}}</span>
                      <span>创建时间：{{dateformatedetail(detailData.time)}}</span>
                  </div>
                  <div class="groupnotice">
                      <p>群公告：{{detailData.notice}}</p>
                  </div>
                  <div class="groupdetailbutton">
                        <div v-if="groupState===7" class="groupsend">
                             <el-button type="primary" @click="toGroupMessageList">发送信息</el-button>
                        </div> 

                        <div v-if="groupState===7" class="deletegroup">
                            <el-button @click="deleteGroup" type="danger">退出群聊</el-button>
                        </div> 
                       
                        <!-- <div v-else-if="groupState===8" class="groupapply">
                            <el-button  type="success">加入群聊</el-button>
                        </div> -->
                    </div>
              </div>
              <!-- 右侧群成员列表 -->
              <div class="groupmemberslist">
                    <div class="groupmemberlistheader">
                        <span>群成员列表（{{groupMemberNumbers}}）</span>
                    </div> 

                    <div class="groupmemberslists">
                        <ul class="groupmemberslistsul">   
                            <li class="groupmemberslistli" v-for="i of groupMembers" :key="i.id">                    
                                    <div class="groupmembersavaname">
                                        <div class="groupmembersavatar">
                                            <el-avatar :src="i.imgurl"></el-avatar>
                                            <div class="groupmembersname">
                                                <span>{{i.name}}</span>
                                            </div> 
                                        </div>  
                                        <div class="groupmemberstime">
                                            <span>{{dateformatedetail(i.time)}}</span>
                                        </div>  
                                    </div>                 
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div v-if="!this.detailData.id" class="notgroupdetail">
                <span>您还没有加入任何群聊，快去加入吧！</span>
            </div>
        </div>
    </div>

</div>
  
  
</template>

<script>
import request from "../utils/request";
export default{
    data(){
        return{
            detailData:{  //群聊详情信息
                id:"",
                name:"",
                notice:"",
                imgurl:"",
                time:"",
                lordName:"",
            },

            createGroupinfo:{  //建群上传信息
                name:"",
                imgurl:"",
                notice:"",
                lordname:""
            },

            dialogVisible: false, //控制建群信息对话框
            showList:"",   //展示的群聊列表
            groupState:"",   //群聊状态
            groupMembers:"", //群成员列表
            groupMemberNumbers:"", //群成员数量
            
            // male:"",
            // type:"",
            // color:"",
           // friendList:"",
            // searchList:"",
            // keyword:"",    
        }
    },

    created(){
        this.getGroupList();
    },

    methods:{ 
        //获取群聊列表
        getGroupList(){
            request.get('/group/groupList').then((res)=>{
                this.showList=res.data.groupLists;
                console.log(res.data)
                this.getGroupDetail(res.data.groupLists[0].id)
            })
        },

        //获取用户信息
        getGroupDetail(id){
        this.detailData.id=id;
        request.get(`/group/groupDetail/${id}`).then((res)=>{
            console.log(res.data);
            this.detailData.name=res.data.detailData.name;
            this.detailData.notice=res.data.detailData.notice;
            this.detailData.imgurl=res.data.detailData.imgurl;
            this.detailData.time=res.data.detailData.time
             //查找群主信息
            this.getUserDetail(res.data.detailData.user_id);
            this.getGroupMembers(id);
            this.groupState=res.data.groupState.state;
            // if(res.data.friendDetail.sex=="男"){
            //     this.male="el-icon-male";
            //     this.type="primary";
            //     this.color="frienddetailname1"

            // }else{
            //     this.male="el-icon-female";
            //     this.type="danger";
            //     this.color="frienddetailname2"
            // }   
        })
        },

        //查找用户信息（群主信息）
        getUserDetail(id){
            request.get(`/user/detail/${id}`).then((res)=>{
                this.detailData.lordName=res.data.name;
            })
        },

        //查找群成员列表
        getGroupMembers(id){
            request.get(`/group/groupMembers/${id}`).then((res)=>{
                console.log(res.data);
                this.groupMembers=res.data;
                this.groupMemberNumbers=res.data.length;
            })
        },

        //建群
        createGroup(){
            if(this.createGroupinfo.imgurl){
               request.post('/group/createGroup',this.createGroupinfo).then((res)=>{
                window.alert(res.data);
                this.dialogVisible= false,
                this.createGroupinfo.name="";
                this.createGroupinfo.notice="";
                this.createGroupinfo.imgurl="";
                this.createGroupinfo.lordname="";
                this.getGroupList();
               }) 
            }  
        },
        
        //上传群头像
        uploadAvatar(e){
            e.preventDefault();
            const files = e.target.files
            const rawFile = files[0]
            let formData = new FormData()
            formData.append("file", rawFile)
            request.post('/group/uploadAvatar',formData).then((res)=>{
                 this.createGroupinfo.imgurl=res.data;
            })   
        },

        //退群
        deleteGroup(){
            let r=confirm("确定退出该群聊吗？");
            if(r==true){
               request.get(`/group/deleteGroup/${this.detailData.id}`).then((res)=>{
                window.alert(res.data);
                this.getGroupList();
                this.getGroupDetail(this.detailData.id);
               }) 
            }
            
        },

        //转换详情信息时间格式
        dateformatedetail(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            let result = `${year}-${month}-${day}`;
            return result
        },
        //修改时间格式
        dateformate(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            let hour = date.getHours();
            let minutes = date.getMinutes();
            let result = `${year}-${month}-${day} ${hour}:${minutes}`;
            return result
        },

        //发送信息
        toGroupMessageList(){
            request.get(`/toGroupMessageList/${this.detailData.id}`).then((res)=>{
                if(res.data){
                      this.$router.push('/messageList')   
                }
            })
        }
  
    }
}
</script>

<style scoped>

* {
    box-sizing:border-box
}
.frienddetaillayout{
width:100%;
height:100%;
background-color:#2c3e50; 
border-radius: 0px 40px 40px 0px;
display: flex;
justify-content:space-between;
}

.friendlist{
    height:100%;
    width:40%;
    padding:20px;
    padding-right: 15px;
    background-color: #2c3e50;
}
.friendsearch{
    color: rgb(237, 241, 244);
    font-size: 18px;
    display: grid;
   place-items: center;
    background-color: #70b2f5;
    padding-bottom: 0px;
    padding-top:5px;
    height:10%;
    border-radius: 5px 5px 0px 0px;
}
.groupaddbutton{
    display: flex;
    justify-content: flex-end;
    width:100%;
}
.groupaddbutton span{
    display: block;
}
.button{
margin-left:100px;
margin-right:20px;
}
.creategroupinput{
margin:20px
}
.creategroupinputavatar{
   margin:20px;
   border: 1px solid rgb(225, 224, 224); 
   border-radius: 3px;
   padding:10px;
}

 .friendlists{
     background-color: white;
     height:90%;
     overflow:auto;
     border-radius: 0px 0px 5px 5px;
     width:100%;
 }

 /* 设置滚动条的样式 */
::-webkit-scrollbar {
width:1px;
}

/* 列表列表样式 */
.friendlistli{
height:60px;
width:100%;
display: flex;
justify-content:space-between;
border-bottom:1px solid rgb(239, 241, 242)
}

.friendlistli:hover{
    background-color: rgb(203, 225, 244);
}

 .friendavaname{
    height:100%;
    display: flex;
    justify-content:space-between;
    width:100%;
}
.friendavatar{
   height:100%;
   /* display: grid;
   place-items: center; */
   display: flex;
   justify-content:flex-start;
   padding:10px
}
.friendname{
    height:100%;
    display: grid;
   place-items: center;
   color:#4c6986;
   padding:10px;
}
.friendname span{
    font-size: 15px;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.friendtime{
    height:100%;
    display: grid;
   place-items: center;
   padding:10px;
   font-size: 12px;
   color: #56789a;
}  

/*右侧详情界面的样式*/ 
.groupcontent{
    height:100%;
    width:60%;
}
.groupdetaillayout{
    padding:20px;
    padding-left:5px;
    background-color: #2c3e50;
    height:100%;
    width:100%;
    border-radius: 0px 20px 20px 0px;
    display: grid;
    place-items: center;
}
.groupdetail{
    /* padding:30px; */
    /* background-color: rgb(178, 193, 208); */
    background-image: url("/img/2051855.jpg");
    background-size: cover;
    height:100%;
    width:100%;
    border-radius: 5px 10px 10px 5px;
    color:rgb(247, 249, 252);
    display: flex;
    justify-content:space-between;
}
.notgroupdetail{
        padding:30px;
    /* background-color: #052f4a; */
    background-image: url("/img/2051855.jpg");
    background-size: cover;
    height:100%;
    width:100%;
    display: grid;
    place-items: center;
    border-radius: 5px 10px 10px 5px;
    color:rgb(237, 239, 241);
    font-size: 19px;
}
.groupmessage{
    height:100%;
    width:60%;
    color:aliceblue;
    padding: 20px;
    font-size: 17px;
}
.groupavatar{
    height:130px;
    width:130px;
    border-radius: 50%;
    background-color:rgb(212, 222, 237);
    overflow: hidden;
    border: 3px solid rgb(214, 224, 235);
}
.groupavatar img{
    height:130px;
    width:130px;
}
.groupnametime{
 margin-top:20px;
}
.groupnametime span{
    display: block;
    margin: 5px;
}

.groupnotice{
    margin-top:30px;
}
.groupmemberslist{
    height: 100%;
    width: 40%;
    background-color: #687480;
    border-radius: 5px;
}
.groupmemberlistheader{
    color: rgb(237, 241, 244);
    font-size: 15px;
    display: grid;
    place-items: center;
    background-color: #053844;
    padding-bottom: 0px;
    padding-top:5px;
    height:10%;
    border-radius: 0px 5px 0px 0px;
}
.groupmemberslists{
    background-color: #022e38;
     height:90%;
     overflow:auto;
     border-radius: 0px 0px 5px 0px;
     width:100%;
}
.groupmemberslistli{
height:60px;
width:100%;
display: flex;
justify-content:space-between;
border-bottom:1px solid #074350
}
.groupmemberslistli:hover{
    background-color: #074350;
}
.groupmembersavaname{
    height:100%;
    display: flex;
    justify-content:space-between;
    width:100%;
}
.groupmembersavatar{
   height:100%;
   display: flex;
   justify-content:flex-start;
   padding:10px
}
.groupmembersname{
    height:100%;
    display: grid;
   place-items: center;
   color:#cee1f4;
   padding:10px;
}
.groupmembersname span{
    font-size: 14px;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.groupmemberstime{
    height:100%;
    display: grid;
   place-items: center;
   padding:10px;
   font-size: 12px;
   color: #d1e4f6;
}
.groupdetailbutton{
    display: flex;
    justify-content:space-around;
    margin-top:50px;
}
.groupsend,.deletegroup,.groupapply{
    margin-left:20px;
    margin-right:20px;
}
</style>